<template>
    <div style="display: inline-block;padding-right: 10px;">
       <span class="xl-form-content" :class="fieldClass(field)">
            <div class="img-prev" v-if="field.fieldType==='img'">
                <CustomImg :item="item" :field =field></CustomImg>
            </div>
            <span v-else >
                <span :style="fieldStyle(field)" v-if="field.handle"  v-html="(renderer?renderer(item,field):item[field.tableField])||'无'" :key="field.tableField" @click="handle(item,field)"></span>
                <span :style="fieldStyle(field)" v-else v-html="(renderer?renderer(item,field):item[field.tableField])||'无'" :key="field.tableField" ></span>
            </span>
        </span>
    </div>
</template>

<script>
import CustomImg from './CustomImg';

export default {
  name: 'field',
  components: { CustomImg },
  data() {
    return {
    }
  },
  props: ['item', 'field', 'renderer'],
  methods: {
    fieldClass(field) {
      if (field.field=='times')
        return 'word-blue-color';
    },
    fieldStyle(field) {
      if (field.handle) {
        return 'color:#FD5D75';
      }
    },
    handle(item, field) {
      if (field.handle) {
        this.$Search.searchWord(item[field.tableField], field.handle, item, field);
      }
    }
  }
}
</script>

<style scoped>
    .xl-field /deep/.xl-form-item{
        width: 100%;
    }
</style>
